<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script>
			function Product(t, p) {
				this.title = t;
				this.price = p;
				this.toString = function() {
					return "title : " + this.title + ", price : " + this.price;
				};
			}

			var products = [];
			window.addEventListener("load", function() {
				var title = document.getElementById("title");
				var price = document.getElementById("price");
				var addB = document.getElementById("addb");
				var target = document.getElementById("result");
				var getB = document.querySelector("#getb");
				var h2 = document.querySelector("h2");
				addB.addEventListener("click", function() {
					h2.innerHTML = "추가된 데이터";
					var product = new Product(title.value, price.value);
					products.push(product);
					target.innerHTML = product;
				});
				getB.addEventListener("click", function() {
					h2.innerHTML = "모든 자료 조회";
					
					var num = 0;
					var text = "";
					for (var row in products) {
						text += (++num) + " : " + products[row] + "<br>";
					}
					target.innerHTML = text;
				});
			});
        </script>
    </head>
    <body>
        <label> title :
            <input type="text" id="title">
        </label>
        <br>
        <label> price :
            <input type="text" id="price">
        </label>
        <br>
        <button id="addb">
            data add
        </button>

        <button id="getb">
            all products
        </button>
        <section>
            <h2>추가된 데이터</h2>
            <div id="result"></div>
        </section>
    </body>
</html>